<template>
  <view class="page">
    <view class="p-top">
      <text style="margin-right: 10rpx">支付剩余时间</text>
      <u-count-down :time="residue" format="HH:mm:ss" autoStart @finish="payEnd" />
    </view>
    <view class="p-body">
      <view class="p-price">
        <u-text
          :text="`￥${virtual_coin || '-'}币`"
          color="#000000"
          size="40rpx"
          align="center"
          bold
          line-height="100rpx"
        />
        <u-text
          :text="`${order_no || '-'}`"
          color="#979797"
          size="28rpx"
          align="center"
        />
      </view>
    </view>
    <view class="btn">
      <view class="button" @click="confirm">立即支付 ￥{{ virtual_coin || "-" }}币</view>
    </view>
  </view>
</template>

<script>
import { mallPayBalance, mallPayment } from "@/request/mallApi.js";
export default {
  data() {
    return {
      residue: 0, // 支付倒计时
      order_id: "", // 订单ID
      virtual_coin: "0", // 支付虚拟币
      token: "", // 订单token令牌
      order_type: "goods", // 订单类型
      order_no: "", // 订单号
      money_coin: 0, // 虚拟币余额
    };
  },
  onLoad(e) {
    let { expiretime, order_id, virtual_coin, token, order_type, order_no } = JSON.parse(
      e.info
    );
    this.residue = expiretime - (Number(new Date()) + 1000);
    this.order_id = order_id;
    this.virtual_coin = virtual_coin;
    this.token = token;
    this.order_type = order_type;
    this.order_no = order_no;
    this.getPayBalance();
  },
  methods: {
    // 获取虚拟币余额
    getPayBalance() {
      mallPayBalance().then((res) => {
        if (res.code == 1) {
          this.money_coin = parseFloat(res.data.virtual_coin);
        }
      });
    },
    // 确认支付
    confirm() {
      if (this.money_coin < this.virtual_coin) {
        uni.showToast({
          title: "虚拟币余额不足",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "支付中",
        mask: true,
      });
      let data = {
        type: "virtual",
        method: "virtual",
        code: null,
        order_type: this.order_type,
        order_id: this.order_id,
        token: this.token,
      };
      mallPayment(data)
        .then((res) => {
          if (res.code == 1) {
            uni.showToast({
              title: "支付成功",
              icon: "success",
              success: () => {
                setTimeout(() => {
                  uni.redirectTo({
                    url: `/pages/mall/payed?id=${this.order_id}&type=${res.data.type}`,
                  });
                }, 1500);
              },
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    // 结束支付
    payEnd() {
      uni.showToast({
        title: "支付超时，订单已取消",
        icon: "none",
        mask: true,
        success: () => {
          setTimeout(() => {
            uni.navigateBack({ delta: 1 });
          }, 1500);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .p-top {
    height: 88rpx;
    width: 100%;
    background-color: #cee7e5;
    display: flex;
    font-size: 32rpx;
    color: $active-color;
    align-items: center;
    justify-content: center;
  }
  /deep/.u-count-down__text {
    font-size: 32rpx;
    color: $active-color;
  }
  .p-body {
    padding: 20rpx;
    .p-price {
      height: 206rpx;
      border-bottom: 1rpx solid #d9d9d999;
      margin-bottom: 20rpx;
    }
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    height: 126rpx;
    padding: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    .button {
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: $active-color;
      font-size: 28rpx;
      background-color: #cee7e5;
      border-radius: 100rpx;
      &:active {
        background-color: #b9e4e1;
      }
    }
  }
}
</style>
